<template>
	<section>
		<div class="product-arrention-contain">
			<div class="pb30rem">
				<div class="mb15rem border-b20">
					<scroll-navbar 
						:channels="channels" 
						key-name="name"  
						key-id="strId" 
						v-model="selected"
					></scroll-navbar>
				</div>
				<ul class="pl30rem pr30rem list-ul layout flex-w" v-if="flag">
					<li class="mb40rem" v-for="(item,index) in product_list" :key='index' v-if="selected == '2'" @click="jumpDetail(item)" style="position:relative">
				 		<img class="responsive-img" :src=" img_url + item.goods_img"alt="">
				 		<p class="mt20rem fs30rem c333 bold ellipsis-more">{{  item.goods_name }}</p>
				 		<p class="pt10rem pb10rem"><strong class="mr5rem fs34rem red bold">￥{{ item.log_price }}</strong><i class="red fs16rem experience">预售价</i></p>	
				 		<div class="layout pt10rem pb10rem">
							<del class="fs20rem c999">原价:{{ item.yuan_price }}元</del>
						</div>
						<div class="layout" v-if="item.booking_endtime - item.current > 0">
							<strong class="fs20rem c38 flex-center">预约倒计时</strong>
							<countdown :data="item.booking_endtime - item.current" :type="countdownType"></countdown>
						</div>
						<img style="position:absolute;bottom:0;right:0; width:5rem;height:5rem" v-if='item.state == -2' src="../../../assets/img11.png" alt="">
				 	</li>
				 	<router-link tag="li" :to="'/mall/mall-detail/' + item.goods_id" class="mb40rem" v-for="(item,index) in product_list" :key='index' v-if="selected == '3'">
				 		<img class="responsive-img" :src=" img_url + item.goods_img"alt="">
				 		<p class="mt20rem fs30rem c333 bold ellipsis-more" style="height:3rem;">{{  item.goods_name }}</p>
				 		<p class="pt10rem pb10rem"><strong class="mr5rem fs34rem red bold">￥{{ item.log_price }}</strong></p>	
				 	</router-link>				 		 	
				</ul>
				<template v-else>
					<default :imgUrl="img" explain='您还没关注商品'></default>
				</template>
			</div>
		</div>	
	</section>
</template>

<script>
	import { getGoodsInfo } from '@/api/goods';
	import ScrollNavbar from '@/components/Scroll-navbar';
	import Countdown from '@/components/Countdown';
	import Default from "@/components/Default";	
	export default{
	    components:{
	        ScrollNavbar,
			Countdown,
			Default	        
		},
		data()
		{
		    return{
				uid           : localStorage.getItem('uid'),
				selected      : '2',
				product_list  : [],
				flag          : false,
				countdownType : true,
				img           : require('../../../assets/icon-goods.png'),
				img_url       : process.env.IMG_URL,
		    	channels:
		    	[
		    		{strId: '2' , name: '预售商品'},
		    		{strId: '3' , name: '在售商品'},
		    	]		    	
            }
		},
		watch:
		{
			selected()
			{
				this.loadData();
			}
		},
		methods:
		{
			loadData()
			{
				getGoodsInfo(this.uid, this.selected).then( res=>{
					this.product_list = res.data
					if(this.product_list.length > 0)
						this.flag = true;
					else
						this.flag = false;
				});
			},
			jumpDetail(item)
			{
				if(item.state != -2)
					this.$router.push('/ordering/detail/commodity-detail/' + item.goods_id)
			}	
		},
		created(){
			this.loadData();
		}
	}
</script>

<style lang="less">
	.product-arrention-contain{
		.mint-navbar{
			width: 100%;
		}
		.list-ul{
			overflow: hidden;
			li{
				width: 48%;
				.count-down{
					span{
						background-color: #383838;
					}
					strong{
						i{
							background-color: #383838;
						}
					}
				}
				.experience{
		    		border-radius: 5/28rem;
		    		background-color: #ffdee5;
		    		padding:2/28rem 5/28rem;
		    		vertical-align: top;
	    		}
			}
		}
	}
</style>

